<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { videoStoreHook } from "@/store/module/video";
import { NewCMSContent, VideoContent } from "@/common/type/cms/content";
import { cloneDeep } from "@pureadmin/utils";
import { selectVideoList } from "@/api/cms_content";
import PlayVideoDesc from "./card/playCard.vue";
import NewVideo from "@/components/NewVideo/index.vue";
defineOptions({
  name: "Play"
});
const video = reactive<NewCMSContent>(cloneDeep(videoStoreHook().video));
const playVideo = ref<VideoContent>({});
onMounted(() => {
  document.title = document.title + video.title;
});
</script>

<template>
  <div class="play">
    <div class="play-wrapper">
      <div class="video-ratio-box">
        <!-- <NewVideo :video="video" /> -->
      </div>
    </div>
    <div class="play-menu">
      <PlayVideoDesc />
    </div>
  </div>
</template>

<style scoped lang="css">
.play {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.play-wrapper {
  display: inline-block;
  height: 3000px;
  flex: 1;
}
.play-menu {
  display: inline-block;
  height: 100%;
  width: 30%;
  max-width: 400px;
  min-width: 300px;
  padding: 10px;
}
.video-ratio-box {
  aspect-ratio: 16 / 9;
  background-color: rgb(21, 21, 21);
}
</style>
